<template>
	<view class="detail-container">
		<view class="detail-card">
			<view class="detail-item">
				<text class="label">标题：</text>
				<text class="content inline">{{formData.title}}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">发布人：</text>
				<text class="content inline">大美汽修</text>
			</view>
			
			<view class="detail-item">
				<text class="label">发布时间：</text>
				<text class="content inline">{{formData.publishTime || '-'}}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">审核状态：</text>
				<text class="content status inline" :class="formData.status.class">{{formData.status.text}}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">审核时间：</text>
				<text class="content inline">{{formData.auditTime || '-'}}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">审核说明：</text>
				<text class="content inline">{{formData.auditRemark || '-'}}</text>
			</view>
		</view>
		
		<view class="detail-card">
			<view class="detail-item">
				<text class="label">发布内容：</text>
				<text class="content inline">{{formData.content || '-'}}</text>
			</view>
			
			<view class="detail-item">
				<text class="label">图片/视频：</text>
				<view v-if="!formData.media.length" class="content">
					<image 
						src="/static/default-image.png" 
						mode="aspectFill"
						class="default-image"
					/>
				</view>
				<view class="media-list" v-else>
					<view 
						v-for="(item, index) in formData.media" 
						:key="index"
						class="media-item"
					>
						<image 
							v-if="item.type === 'image'"
							:src="item.url" 
							mode="aspectFill"
							class="media-image"
							@click="previewMedia(item, index)"
						/>
						<video 
							v-else
							:src="item.url"
							class="media-video"
							@click="previewMedia(item, index)"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				title: '',
				content: '',
				media: [],
				publishTime: '',
				status: {
					text: '待审核',
					class: 'status-pending'
				},
				auditTime: '',
				auditRemark: ''
			}
		}
	},
	onLoad(options) {
		// 接收传递的数据
		if (options.data) {
			const data = JSON.parse(decodeURIComponent(options.data));
			this.formData = {
				...data,
				publishTime: this.formatTime(new Date()),
				status: {
					text: '待审核',
					class: 'status-pending'
				}
			};
		}
	},
	methods: {
		formatTime(date) {
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const hour = date.getHours().toString().padStart(2, '0');
			const minute = date.getMinutes().toString().padStart(2, '0');
			return `${year}/${month}/${day} ${hour}:${minute}`;
		},
		previewMedia(item, index) {
			if (item.type === 'image') {
				uni.previewImage({
					urls: this.formData.media
						.filter(m => m.type === 'image')
						.map(m => m.url),
					current: index
				});
			} else {
				uni.navigateTo({
					url: `/pages/video-player/video-player?url=${encodeURIComponent(item.url)}`
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-container {
	padding: 15px;
}

.detail-card {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
}

.detail-item {
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.label {
		font-size: 14px;
		color: #333;
		font-weight: bold;
		width: 80px;
		flex-shrink: 0;
	}
	
	.content {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
		word-break: break-all;
		
		&.inline {
			flex: 1;
		}
		
		&.status {
			&.status-pending {
				color: #FF9900;
			}
			&.status-success {
				color: #52C41A;
			}
			&.status-failed {
				color: #FF4D4F;
			}
		}
	}
}

.default-image {
	width: 120px;
	height: 120px;
	border-radius: 8px;
}

.media-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.media-item {
	width: 120px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	
	.media-image, .media-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
</style> 